<!-- 头部布局开始 -->
<ul class="lts-header">
  <!-- 侧边栏触发按钮(移动端时显示) -->
  <li>
    <div class="lts-header-item lts-sidebar-toggle">
      <i class="bi bi-list"></i>
    </div>
  </li>
  <!--  占位(可以让后面的li居右)  -->
  <li class="flex-grow-1"></li>
  <!--  搜索(不需要可以删除)  -->
  <li>
    <div class="lts-header-item lts-search-form-open-btn">
      <i class="bi bi-search"></i>
    </div>
  </li>
  <!--  通知(如果有新消息则添加类名.lts-has-msg)  -->
  <li>
    <div class="lts-header-item" data-lts-href="message.html">
      <i class="bi bi-bell lts-has-msg"></i>
    </div>
  </li>
  <!--  拓展菜单(建议把拓展放在此处,以免破坏头部整体布局,不需要可以直接删除)  -->
  <li class="dropdown">
    <div
      class="lts-header-item"
      data-bs-toggle="dropdown"
      data-bs-auto-close="outside"
    >
      <i class="bi bi-grid"></i>
    </div>
    <div class="dropdown-menu dropdown-menu-end p-0">
      <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between bg-body">
          <span class="lts-fs-15">拓展菜单</span>
          <a
            href="javascript:"
            class="lts-fs-13 text-decoration-none text-body-secondary">编辑</a
          >
        </div>
        <div class="card-body overflow-y-auto">
          <div class="container-fluid">
            <div class="row row-cols-3 g-3">
              {
                Array.from({ length: 5 }).map((_, index) => (
                  <div class="col text-center">
                    <div class="lts-app-box mx-auto">
                      <i class="bi bi-link" />
                    </div>
                    <div class="lts-app-title">App-{index}</div>
                  </div>
                ))
              }
            </div>
          </div>
        </div>
        <div class="card-footer text-center bg-body">
          <a
            href="javascript:"
            class="lts-fs-14 text-decoration-none text-body-secondary"
            >查看更多菜单</a
          >
        </div>
      </div>
    </div>
  </li>
  <!--  全屏  -->
  <li>
    <div class="lts-header-item lts-fullscreen-trigger">
      <i class="bi bi-arrows-fullscreen"></i>
    </div>
  </li>
  <!--  主题配色  -->
  <li class="dropdown">
    <div class="lts-header-item">
      <i class="bi bi-palette"></i>
    </div>
  </li>
  <!--    管理员信息    -->
  <li class="dropdown">
    <div class="lts-header-item" data-bs-toggle="dropdown">
      <div class="lts-user-area">
        <img
          src="assets/img/avatar.jpg"
          class="lts-user-avatar"
          alt="用户头像"
        />
        <!-- 如果你只需要头像,那么你可以直接把下面这部分删除  -->
        <div class="lts-user-details">
          <div class="lts-user-name">欲饮琵琶码上催</div>
          <!-- 管理员角色RBAC权限设计时可用(不需要可删除,上面的用户名可自动垂直居中)  -->
          <div class="lts-user-role">超级管理员</div>
        </div>
      </div>
    </div>
    <ul class="dropdown-menu dropdown-menu-end">
      <li>
        <a class="dropdown-item" href="profile.html">
          <i class="bi bi-person me-2"></i>个人资料
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="reset-password.html">
          <i class="bi bi-key me-2"></i>修改密码
        </a>
      </li>
      <li>
        <div class="dropdown-divider"></div>
      </li>
      <li>
        <a class="dropdown-item lts-logout-trigger" href="javascript:">
          <i class="bi bi-box-arrow-right me-2"></i>退出登录
        </a>
      </li>
    </ul>
  </li>
</ul>
<!-- 头部布局结束 -->
